import HttpUtils from "../common/utils/HttpUtils";
import CommonUtils from "../common/utils/CommonUtils";
import CenterSection from "./comps/CenterSection";
import TopSection from "./comps/TopSection";
import product from "../../../imgs/product-1.jpg";
import arrowleft from "../../../imgs/arrowleft.png";
import "./detail.css";
import searchproduct from "@root/pages/ruijing/search/searchproduct.css"
import ic_notfound from "imgs/ic_notfound.png";

class Detail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            product: null,
            comment: null,
            companyComment: null,
            loadData: false,
            productId: $state.params&&$state.params.productId,
            suppId: $state.params&&$state.params.suppId,
            errMsg:''
        };

    }

    componentDidMount() {
        this.getProductInfo();

        if (global.hasLogin) {
            this.getTotalComments();
            this.getCompanyComments();
        }
    }

    componentWillReceiveProps(nextProps) {
        if ($state.params.productId !== this.state.productId) {
            this.setState(
                {
                    productId: $state.params.productId,
                    suppId: $state.params.suppId
                },
                () => {
                    this.getProductInfo();
                    if (global.hasLogin) {
                        this.getTotalComments();
                        this.getCompanyComments();
                    }
                }
            );
        }
    }

    getProductInfo() {
        HttpUtils.getProductInfo(this.state.productId)
            .then(res => {
                console.log(res);
                this.setState({
                    loadData: true
                });
                if (res.code == "0000") {
                    this.setState({
                        product: global.hasLogin ? res.product : res
                    });
                }else {
                    this.setState({
                        errMsg:res.message
                    })
                }
            })
            .catch(err => {
                this.setState({
                    loadData: true
                });
                console.log(err);
            });
    }

    //
    getTotalComments() {
        HttpUtils.getProductComments(this.state.productId, 1, 10)
            .then(res => {
                console.log(res);
                this.setState({
                    comment: res.data
                });
            })
            .catch(err => {
                console.log(err);
            });
    }

    getCompanyComments() {
        HttpUtils.getCompanyComments(this.state.productId, 1, 10)
            .then(res => {
                console.log(res);
                this.setState({
                    companyComment: res.data
                });
            })
            .catch(err => {
                console.log(err);
            });
    }

    render() {
        // const {product}=this.state
        return (
            <div style={{ backgroundColor: "#fff", position: "relative" }}>
                {this.renderCenter()}
                {/*<YouMayLike/>*/}
                <div style={{ height: 50 }} />

                <div className={"detail-page-footer-top-line"} />
            </div>
        );
    }

    renderCenter() {
        const { product, comment,companyComment, loadData } = this.state;


        if (!product && !loadData) {
            return null;
        }
        if (!product && loadData) {
            return <NotFoundProduct errMsg={this.state.errMsg}/>;
        }
        return (
            <div className={"detail-page-content-warpper"}>
                <div className={"detail-page-content-box"}>
                    <TopSection
                        product={product}
                        comment={comment}
                        suppId={this.state.suppId}
                        productId={this.state.productId}
                    />
                    <CenterSection
                        product={product}
                        comment={comment}
                        companyComment={companyComment}
                        suppId={this.state.suppId}
                        productId={this.state.productId}
                    />
                </div>
            </div>
        );
    }
}

class NotFoundProduct extends React.Component {
    constructor() {
        super();
        this.lists = [];
    }
    render() {
        const {errMsg}=this.props;
        return (
            <div
                className={
                    "search-not-fount-product"
                }
            >
                <img src={ic_notfound} alt="" />
                <div style={{ height: 25 }} />
                <p style={{ color: "rgba(150, 150, 150, 1)", fontSize: 13 }}>
                    {errMsg}
                </p>
            </div>
        );
    }
}



export default Detail;
